리엑트 함수형 컴포넌트의 생명주기

과거엔 클래스형 컴포넌트가 주를 이루었고 클래스형 컴포넌트에는 생명 주기를 메서드로 제공했지만, 현재는 함수형 컴포넌트가 주를 이루고 있다. 함수형 컴포넌트는 생명 주기를 메서드로 제공하지 않지만, 훅을 사용하여 생명 주기를 관리할 수 있다.

React 함수형 컴포넌트의 생명주기는 더 선언적이고 예측 가능하며, 부작용(side effects)과 상태 관리를 더 명확하게 분리할 수 있게 해준다.

생명주기를 위한 훅#

1. 마운트(Mount)-컴포넌트가 DOM에 추가될때

   • useState: 상태 초기화
   • useEffect(callback,[]): 빈 의존성 배열을 사용하면 컴포넌트가 마운트될 때 한 번만 실행된다. 이는 클래스 컴포넌트의 componentDidMount와 유사하다.

2. 업데이트(Update)-컴포넌트가 리렌더링될 때

   • useEffect(callback,[dpendencies]): 의존성 배열의 값이 변경될 때마다 실행된다. 이는 클래스 컴포넌트의 componentDidUpdate와 유사하다.
   • useMemo,useCallback: 의존성이 변경될 때만 값이나 함수를 재계산하여 최적화한다.

3. 언마운트(Unmount)-컴포넌트가 DOM에서 제거될 때

   • useEffect의 클린업 함수:useEffect(()=>{return()=>{/*정리 로직*/}},[]). 이는 크래스 컴포넌트의 componentWillUnmount와 유사하다.

4. 에러 처리

   • useErrorBoundary(별도 라이브러리) 또는 상위 컴포넌트에서 ErrorBoundary 클래스 사용

추가로 알아두면 좋은 개념들#

• 조건부 렌더링: 함수형 컴포넌트는 조건에 따라 다른 JSX를 반환할 수 있다.
• 렌더 최적화: React.memo를 사용하여 불필요한 리렌더링을 방지할 수 있다.
• 커스텀 Hooks: 여러 생명주기 관련 로직을 재사용 가능한 자체 Hook으로 만들 수 있다.